<template>
  <div class="box search">
    <header class="header">
      <van-nav-bar left-arrow
      @click-right="goSearch"
      @click-left="$router.back()"
      >
        <template #right>
          搜索
        </template>
        <template #title>
          <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
        </template>
      </van-nav-bar>
    </header>
    <div class="content">
      <div class="hot-search s-box">
        <p style="font-weight: 700;">热门搜索</p>
        <div class="list">
          <van-tag v-for="item in hot" :key="item" plain type="primary" size="large">{{item}}</van-tag>
        </div>
      </div>
      <div class="history-search s-box">
        <p  style="font-weight: 700;">最近搜索</p>
        <div class="list">
          <van-tag v-for="(item,idx) in history" :key="item.searchId" plain type="primary" closeable @close="close(item.searchId,idx)" size="large">{{item.searchText}}</van-tag>
        </div>
      </div>
      <!-- <van-divider>文字</van-divider> -->
  </div>
  <van-divider>
    <van-icon name="like-o" color="red"/>
    猜你喜欢
    </van-divider>
    <div class="guessLike">
      <van-grid :border="false" :column-num="2" class="guessGrid">
        <van-grid-item class="guessGrid1">
          <van-image src="https://res.bestcake.com/m-images/ww/jd/奥利奥雪域牛乳芝士.png?v=14" radius="6px" />
          <van-cell title="极地牛乳" value="" size="large" label="¥128/个" />
        </van-grid-item>
        <van-grid-item class="guessGrid1">
          <van-image src="https://res.bestcake.com/m-images/ww/jd/蓝妃儿.png?v=14" radius="6px"  />
        <van-cell title="极地牛乳" value="" size="large" label="¥128/个" />
        </van-grid-item>
        <van-grid-item class="guessGrid1">
          <van-image src="https://res.bestcake.com/m-images/ww/ns/%E5%8F%8C%E8%8E%93%E8%90%BD%E9%9B%AA.jpg?v=14" radius="6px"  />
        <van-cell title="极地牛乳" value="" size="large" label="¥128/个" />
        </van-grid-item>
        <van-grid-item class="guessGrid1">
          <van-image src="https://res.bestcake.com/m-images/ww/jd/%E8%8D%89%E8%8E%93%E6%8B%BF%E7%A0%B4%E4%BB%91.png?v=14" radius="6px"  />
        <van-cell title="极地牛乳" value="" size="large" label="¥128/个" />
        </van-grid-item>
      </van-grid>
    </div>
</div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Search, Tag, Divider, Grid, GridItem, Cell, CellGroup } from 'vant'
import { getSearch, addSearch, delSearch } from '../../api/index.js'

Vue.use(NavBar)
Vue.use(Search)
Vue.use(Tag)
Vue.use(Divider)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Cell)
Vue.use(CellGroup)

export default {
  data () {
    return {
      value: '',
      hot: ['芝士', '红丝绒', '草莓', '牛乳', '狮子', '情', '泡芙', '生巧', '双果小确幸', '巧克力'],
      history: []
    }
  },
  methods: {
    close (id, i) {
      delSearch({
        userId: localStorage.getItem('userId'),
        searchId: id
      }).then(res => {
        console.log('删除搜索关键字成功')
        this.history.splice(i, 1)
      })
    },
    goSearch () {
      addSearch({
        userId: localStorage.getItem('userId'),
        searchText: this.value
      }).then(res => {
        console.log('添加成功，可以跳转到搜索页面')
        getSearch({
          userId: localStorage.getItem('userId')
        }).then(res => {
          this.history = res.data.data
        })
      })
      this.$router.push('/searchRes/' + this.value)
    }
  },
  mounted () {
    getSearch({
      userId: localStorage.getItem('userId')
    }).then(res => {
      this.history = res.data.data
      console.log(this.history)
    })
  }
}
</script>

<style lang="scss">
  .search{
    .header{
      border-bottom: solid 1px #eee;
    }
    .van-nav-bar__title{
      width: 70%;
      max-width: 70%;
    }
    .van-search{
      padding:0;
    }
    .content{
      padding: 0.1rem;
      background-color: #eee;
    }
    .s-box{
      padding: 0.1rem 0;
      h4{
        font-weight: normal;
        font-size: 18px;
      }
      .list{
        .van-tag{
          margin: 0.06rem;
          color: #777;
        }
      }
    }
      .van-nav-bar .van-icon {
          color: #aaa
      }
      .van-nav-bar__right {
          color: grey;
      }
      #app .box .content {
          flex: none;
      }
      .content{
        background-color: white;
      }
       .guessGrid1{
         border: 1px solid lightgrey;
       }
  }
</style>
